<template>
    <div class="userInfo">
        <div class="header">
            <div class="header-left"><img src="../../images/touxiang.jpg"></div>
            <div class="header-right">
                <span class="title">{{ userInfo.name }} <van-icon name="fire-o" color="#ff7a45" /></span>
                <span class="remarks">简介:{{ userInfo.remark }}</span>
            </div>
        </div>
        <div class="main">
            <van-tabs v-model:active="activeName" color="#7cb305" animated swipeable>
                <van-tab title="主页" name="a">
                    <ul class="info">
                        <li>
                            <span class="key">用户ID</span>
                            <span class="userValue">{{ userInfo.id }}</span>
                        </li>
                        <li>
                            <span class="key">联系电话</span>
                            <span class="userValue">{{ userInfo.phone }}</span>
                        </li>
                        <li>
                            <span class="key">邮箱地址</span>
                            <span class="userValue">{{ userInfo.email }}</span>
                        </li>
                        <li>
                            <span class="key">性别</span>
                            <span class="userValue">{{ userInfo.sex }}</span>
                        </li>
                        <li>
                            <span class="key">出生日期</span>
                            <span class="userValue">{{ userInfo.birthday }}</span>
                        </li>
                        <li>
                            <span class="key">地址</span>
                            <span class="userValue">{{ userInfo.address }}</span>
                        </li>
                    </ul>
                </van-tab>
                <van-tab title="动态" name="b">
                    <van-empty description="您还没有发布过动态" />
                </van-tab>
            </van-tabs>
        </div>
    </div>

</template>


<script setup>
import {useStore} from 'vuex'
import {computed,ref,reactive} from 'vue'

let store = useStore()

let activeName = ref('a')
let userKey = reactive(['用户ID','联系电话','邮箱地址','性别','出生日期','地址','详细地址'])

let userInfo = computed(()=>{
    return store.getters['loginModule/getUserInfo']
})
</script>


<style lang="less" scoped>
@import '../../style/common.less';
    .userInfo{
        display: block;
        position: relative;
        padding: 12px;
        >.header{
            min-height: 160px;
            padding: 0 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid @c10;
            >.header-left{
                >img{
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    border: 2px solid @c9;
                }
            }
            >.header-right{
                width: 200px;
                display: flex;
                flex-direction: column;
                >.title{
                    color: @c10;
                    display: block;
                    margin-bottom: 10px;
                    font-size: 1.2rem;
                }
                >.remarks{
                    font-size: .7rem;
                    color: @g7;
                }

            }
        }
        >.main{
            display: block;
            position: relative;
            .info{
                padding: 8px 12px;
                >li{
                    display: flex;
                    line-height: 50px;
                    justify-content: space-between;
                    border-bottom: 1px solid @g3;
                    >.key{
                        font-size: .9rem;
                        color: @c10;
                        width: 24%;
                    }
                    >.userValue{
                        text-align: right;
                        width: 76%;
                        font-size: .8rem;
                        color: @g7;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
                }
            }
        }
    }
</style>